<template>
  <div class="commit">
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="state.imgurl.length > 1 ? 3000 : ''" indicator-color="white"
        :show-indicators="false">
        <van-swipe-item v-for="i in state.imgurl" :key="i">
          <img src="../../assets/lbt.png" alt="" v-if="state.imgurl.length == 0">
          <img :src="'https://baoanqifu.tgovcloud.com/govcloud/yanluoApi/' + i.Image[0].url" alt=""
            v-if="state.imgurl.length > 0">
          <div class="lib-img">
            <div class="listbb">
              宝安区·燕罗街道
            </div>
            <div class="listqm">
              总面积: 36.53平方千米
            </div>

          </div>
          <div class="input-item" @click="jumpSearch">
            <img src="../../static/login/search.png" alt="" class="input-icon"> 请输入关键字查询

          </div>
        </van-swipe-item>
      </van-swipe>
      <div class="enterprise">
        <div class="enterprise-item">
          <img src="../../assets/img.png" class="assetslist">
          <van-field v-model="state.corpName" :disabled="state.corpName" :placeholder="state.flag ? '选择关联企业/机构' : '去登录'"
            class="list" />
          <span @click="qgli" v-if="state.corpName == ''">{{ state.flag ? '去关联' : '去登录' }}</span>
          <span @click="qh" v-if="state.corpName">去切换</span>
        </div>
      </div>
    </div>
    <!-- 企业 -->
    <div class="laib">
      <div class="laib-item">
        <img src="../../assets/laba001hover.png" class="laba001hover">
        <img src="../../assets/ion13.png" class="ion13">
        <!-- <marquee 
              class="listdd"
        direction="left" 
        behavior="scroll" 
        loop="6" 
        scrollamount="1" 
        scrolldelay="10" 
        align="middle" 
        bgcolor="#E0ECFF" 
        height="44" 
        width="70%" 
        hspace="20" 
        vspace="10"> 
        燕罗湾区芯城集中连片区域空间推介大会</marquee> -->
        <div class="left-idst">
          <vue3-seamless-scroll :singleLine="true" direction="left" :list="list" class="scroll">
            <div class="item" v-for="(item, index) in list" :key="index">
              <span @click="gotoCi(item.ID, item.name)">{{ item.title }}</span>
            </div>
          </vue3-seamless-scroll>
        </div>

      </div>
    </div>

    <!-- 列表 -->
    <div class="list-kj">
      <ul>
        <li v-for=" item in state.Findsitem" :key="item" @click="pathlist(item.link, item.text)">
          <img :src="'https://baoanqifu.tgovcloud.com/govcloud/yanluoApi/' + item.Image[0].url"
            :class="item.Name == '找空间' ? 'list' : item.Name == '找资金' ? 'zij' : item.Name == '政策库' ? 'zc' : ''">
          <span>{{ item.Name }}</span>
        </li>
        <!-- <li @click="pathlist('https://qqzq.baoan.gov.cn/biqvxapph5/?financeList=1&accessKey=dev:test')">
        <img src="../../assets/qunfengzijintixian.png" class="zij">
        <span>找资金</span>
      </li>
       <li @click="pathlist('https://qqzq.baoan.gov.cn/biqvxapph5/?allPolicyList=1&accessKey=dev:test','全部政策')">
        <img src="../../assets/zhengce.png" class="zc">
        <span>政策库</span>
      </li> -->
        <li @click="txinq">
          <img src="../../assets/suqiu1.png" class="xq">
          <span>提诉求</span>
        </li>
      </ul>
    </div>
    <!-- 特色服务 -->
    <div class="title">特色服务</div>

    <div class="title-list">
      <ul>
        <li class="colork"
          @click="getwindow('https://www.delilegal.com/h5/ai/model?publicKey=4FStWodO1hDRCWn&appid=siq')">
          <img src="../../assets/ion3.png" class="ion3">
          <div class="title-item">法律AI助手<van-icon color="#3B8AFD" name="play" /></div>
          <div><img src="../../assets/ion9.png"><span>公司经营</span></div>
          <div><img src="../../assets/ion7.png"><span>合同生成</span> </div>
          <div><img src="../../assets/ion12.png"><span>知识产权</span></div>
          <div class="list">
            <img src="../../assets/qi.png" class="qi">
          </div>
        </li>
        <li class="colorr" @click="getwindow('https://bpai-h5.biaopu.cloud/guide?channelCode=YLJD')">
          <img src="../../assets/ion1.png" class="ion3">
          <div class="title-item">智能财税<van-icon color="#FF8300" name="play" /></div>
          <div><img src="../../assets/ion8.png"><span>财税咨询</span></div>
          <div><img src="../../assets/toutiao.png"><span>税务头条</span></div>
          <div class="list">
            <img src="../../assets/Fill1.png" class="Fill1">
          </div>

        </li>
        <!-- @click="getwindow('https://www.iucai.com.cn/#/to-mini-program')"  -->
        <li class="colord" @click="getrlzhi">
          <img src="../../assets/ion2.png" class="ion3">
          <div class="title-item">人力资源<van-icon color="#E86366" name="play" /></div>

          <div><img src="../../assets/rencaiduijie.png"><span>招人才</span></div>
          <div><img src="../../assets/zhaogongzuo.png"><span>找工作</span></div>
          <div class="list">
            <img src="../../assets/a-007_renlizhaopin.png" class="enlizhaopin">
          </div>
        </li>
        <!--  -->
        <li class="colork" @click="listqyin">

          <img src="../../assets/ion3.png" class="ion3">
          <div class="title-item">企业出海<van-icon color="#3B8AFD" name="play" /></div>
          <div> <img src="../../assets/dunpaibaoxianrenzheng.png"> <span>海外拓客</span></div>
          <div> <img src="../../assets/kuajing.png"> <span>跨境物流 </span></div>
          <div> <img src="../../assets/productinterface.png"> <span>出口信保 </span></div>
          <div> <img src="../../assets/zhihuiwuliu.png"><span>海外品宣</span></div>
          <div class="list">
            <img src="../../assets/xiaomaochuhai.png" class="xiaomaochuhai">
          </div>
        </li>
      </ul>
    </div>

    <!-- 特色园区 -->
    <div class="title">特色园区</div>
    <div class="swipe1">
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
        <van-swipe-item class="swipe-pos" v-for="item in state.Park" @click="goPark(item.ID, item.Name)" :key="item">
          <img :src="'https://baoanqifu.tgovcloud.com/govcloud/yanluoApi/' + item.imgs[0].url">
          <div class="list">{{ item.Name }}</div>
        </van-swipe-item>
        <!-- <van-swipe-item class="swipe-pos"  @click="goPark('1','富比伦鹏洲科技园')">
        <img src="../../assets/fpi.png" alt="">
        <div class="list">富比伦鹏洲科技园</div>
      </van-swipe-item>
      <van-swipe-item class="swipe-pos"  @click="goPark('2','金环宇产业大厦')">
        <img src="../../assets/jse.png" alt="">
        <div class="list">金环宇产业大厦</div>
      </van-swipe-item>
      <van-swipe-item class="swipe-pos"  @click="goPark('3','时代方舟大厦')">
        <img src="../../assets/sdian.png" alt="">
        <div class="list">时代方舟大厦</div>
      </van-swipe-item>
      <van-swipe-item class="swipe-pos"  @click="goPark('4','劲嘉产业园')">
        <img src="../../assets/jiang.png" alt="">
        <div class="list">劲嘉产业园</div>
      </van-swipe-item>
      <van-swipe-item class="swipe-pos"  @click="goPark('5','和谷山汇城')">
        <img src="../../assets/hegui.png" alt="">
        <div class="list">和谷山汇城</div>
      </van-swipe-item> -->
      </van-swipe>
    </div>

    <!-- 企业风采 -->
    <div class="title">企业风采 </div>
    <div class="qyfc">
      <van-swipe class="qyfcimgli" :autoplay="2000" :width="270" :show-indicators="false">
        <van-swipe-item v-for="item in state.dataCorporat" @click="goFirm(item.ID, item.Name)" :key="item">
          <img :src="'https://baoanqifu.tgovcloud.com/govcloud/yanluoApi/' + item.Image[0].url" class="qyfcimg">
          <span>{{ item.Name }}</span>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 园区服务 -->
    <div class="title">园区服务 <span @click="yuanqitem">更多</span></div>
    <div class="yuanq">
      <van-tabs v-model:active="state.active">
        <van-tab :title="itst" v-for="(itst, index) in state.listits" :key="index">
          <div class="yaung-item" @click="lawitem(item.cuid)" v-for="item in state.flistfw" :key="item"
            :class="item.srvTypeL1.includes(itst) ? '' : 'disnon'">
            <div class="item-left">
              <img :src="item.img" alt="">
            </div>
            <div class="item-right">
              <div class="item-wzi">{{ item.shopName }}</div>
              <div class="xinxin"> <img v-for="iytem in item.score" :key="iytem" src="../../assets/xing.png" alt=""> {{
                item.score }}.0
                <!-- <span>24.83km</span> -->
              </div>
              <div class="pl"><span v-for="its in item.srvTypeL2" :key="its">{{ its }}
                </span>
              </div>
            </div>
          </div>
        </van-tab>

      </van-tabs>
    </div>
    <!-- 党建服务 -->
    <div class="title">党建服务 </div>
    <div class="zhonx" @click="gotoCi1('service')">
      <div class="zhong">
        <img src="../../assets/zxin.png" alt="">
      </div>
    </div>
    <!-- 发现活动 -->
    <div class="title">发现活动 <span @click="finditem">更多</span></div>
    <div class="activity">
      <div class="activity-item" @click="gotoCiitem(i.cuid)" v-for="(i, t) in state.find.slice(0, state.findindex)"
        :key="t">
        <div class="item-left">
          <img :src="i.img">
          <span> {{ i.nType }}</span>
        </div>
        <div class="item-right">
          <p>{{ i.title }}</p>
          <div class="tiele">{{ i.addr }}</div>
          <div class="tiele">{{ i.nDutyDept }}</div>
          <div class="item">
            <div class="item-leftt">
              <span>{{ i.actTypeL2 }}</span>
            </div>
            <div class="item-rightt">
              <img src="../../assets/yanjing.png" alt=""><span>{{ i.clicks }}</span>
              <img src="../../assets/fenxiang.png" class="fenxiang"><span>{{ i.shares }}</span>
              <img src="../../assets/xingxing.png" class="xingxing"><span>{{ i.favorites ? i.favorites : '0' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="mygd" v-if="state.find.length == 0">
        没有更多
      </div>
    </div>
    <!-- 街道资讯 -->
    <div class="title">街道资讯 <p>了解最新的街道资讯</p> <span class="ligd" @click="informationitem">更多</span></div>
    <div class="activity-one">
      <div class="activity-item" @click="gotoCi(i.cuid)"
        v-for="(i, t) in state.information.slice(0, state.informationindex)" :key="t">
        <div class="item-left">
          <!-- <img src="../../assets/5431.png" v-if="i.ID ==7">
        <img src="../../assets/ion18.png" v-if="i.ID ==6">
        <img src="../../assets/11559.jpg" v-if="i.ID ==5"> -->
          <!-- <img :src="'https://baoanqifu.tgovcloud.com/govcloud/yanluoApi/'+i.Image[0].url" v-if="i.Image.length>0" > -->
          <img :src="i.img" alt="">
        </div>
        <div class="item-right">
          <p>{{ i.title }}</p>
          <div class="tiele"><span>发布时间：</span>{{ i.publishDate }}</div>
          <div class="tiele"><span>主管部门：</span>{{ i.publishAgency }}</div>
          <div class="item">
            <div class="item-rightt">
              <img src="../../assets/yanjing.png" alt=""><span>{{ i.clicks }}</span>
              <img src="../../assets/fenxiang.png" class="fenxiang"><span>{{ i.shares }}</span>
              <img src="../../assets/xingxing.png" class="xingxing"><span>{{ i.favorites }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 拉动圆球 -->
    <!-- <div class="container"> -->
    <div class="draggable-circle" ref="draggableBall" @mousedown="click" @touchstart="startDrag" @touchmove="doDrag">
    </div>
  </div>
  <!-- </div> -->
</template>

<script setup>
import { defineComponent } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import $api from '@/utils/api'
import { showToast, showNotify } from 'vant';
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
import axios from 'axios'
import { Buffer } from "buffer/";
import sha256 from "js-sha256";

const crypto = require("crypto-js");
const list = ref([]);
const ballRef = ref(null);
const ballPosition = ref({ x: 100, y: 100 });
const state = reactive({
  timer: null,
  flag: true,
  Findsitem: '',
  corpName: '',
  Park: [],
  active: 0,
  activity: '',
  information: [],
  find: [],
  findflag: false,
  stadfla: false,
  informationflag: false,
  informationindex: 3,
  findindex: 2,
  imgurl: [],
  dataCorporat: [],
  AccessKey: '',
  result: '',
  roleLevel: '',
  corpCid: '',
  flistfw: [],
  listits: [],
  sdata: '',
  stafalg: false,
  timeOutEvent: 0, // 记录触摸时长
  active1: false,
})
// 

const draggableBall = ref(null);
let currentX, currentY, initialX, initialY, xOffset = 0, yOffset = 0;
const handleTouchStart = (e) => {
  console.log(e.touches[0].pageX)
}
const click = () => {
  clearTimeout(state.timeOutEvent);
  state.timeOutEvent = setTimeout(function () {
    state.timeOutEvent = 0;
    //  处理长按事件...
  }, 600);
  // 阻止默认事件，防止拖动时页面滚动  
  draggableBall.value.addEventListener('mouseup', stopDrag, false);
}
const startDrag = (e) => {
  let dom = e.targetTouches[0]
  // state.active1 = true;
  initialX = dom.clientX - xOffset;
  initialY = dom.clientY - yOffset;


};

const doDrag = (e) => {
  e.preventDefault();
  console.log(e.touches[0])
  let dom = e.targetTouches[0]
  currentX = dom.clientX - initialX;
  currentY = dom.clientY - initialY;

  xOffset = currentX;
  yOffset = currentY;
  console.log(e.clientX, e.clientY)

  // 更新悬浮球的位置  
  draggableBall.value.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`;
};

const stopDrag = () => {
  clearTimeout(state.timeOutEvent);
  if (state.timeOutEvent !== 0) {
    //  处理单击事件
    wx.miniProgram.navigateTo({
      url: "/packages/zoneIndex/home/inzone/index?parkName='燕罗街道'"
    });
  }
  console.log(state.active1)

  if (state.active1) {
    document.removeEventListener('onmouseover', doDrag, false);
    document.removeEventListener('mouseup', stopDrag, false);
    state.active1 = false;
  }
};
onUnmounted(() => {
  // 清理事件监听器，防止内存泄漏  
  document.removeEventListener('onmouseover', doDrag, false);
  document.removeEventListener('mouseup', stopDrag, false);
});

const jumpSearch = () => {

  router.push({
    path: '/search',
  })
}
const qh = () => {
  wx.miniProgram.navigateTo({
    url: '/packages/users/company/list/index'
  });
}
const qgli = () => {
  if (state.flag == false) {
    wx.miniProgram.redirectTo({
      url: '/packages/users/wxface/index?appCode=yljd&action=facialRecognition&redirect=https://baoanqifu.tgovcloud.com/govcloud/yanluoH5/',
      success: (res) => {
        console.log(res)
      },
      fail: (err) => {
        console.log(err);
      },
      complete: (res) => {
        console.log(res)
      }
    });
    return
  } else {
    wx.miniProgram.navigateTo({
      url: '/packages/users/company/add/index'
    });
  }
}
const authlist = () => {

  let url = 'https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/auth/getAccessToken'
  axios.get(url,
    {
      headers: {
        'Access-App-Code': 'yljd',
        "Access-Key": state.AccessKey,
      },
    }
  )
    .then(res => {
      // qgliitem(res.data.data)
    })
}
const qgliitem = (item) => {
  let url = 'https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/auth/curUser'
  axios.get(url,
    {
      headers: {
        'Access-Uid': item.uid,
        "Access-Token": item.token,
        "Access-App-Code": 'yljd',
      },
    }
  )
    .then(res => {
      state.roleLevel = res.data.data.roleLevel
      state.corpCid = res.data.data.corpCid
      state.corpName = res.data.data.corpName
    })
}
const zdqyeng = () => {
  axios.get('https://baoanqifu.tgovcloud.com/govcloud/yanluoApi/?c=apidata&m=api&org=1&name=init&type=json&key=hooyn',
    {
      params: { "ID": 1 }
    }
  ).then(res1 => {
    if (res1.data.success == 1) {
      let Appid = atob(res1.data.message.app_id);
      let Appkey = atob(res1.data.message.app_key);
      // console.log(Appid, Appkey)
      let url = ' https://baoanqifu.tgovcloud.com/govcloud/qqzqcloud/balocal-h5-api/dev-api/contact/verifyZdEnterprise'
      axios.get(url,
        {
          headers: {
            'Appid': Appid,
            "Appkey": Appkey,
          },
          params: {
            tyshxydm: state.corpCid
          }
        }
      )
        .then(res => {
          if (res.data.data.result == false) {
            state.stafalg = false
            if (state.roleLevel != 'L1' && state.stafalg == false) {
              wx.miniProgram.navigateTo({
                url: '/packages/appeal/main/index'
              });
              return
            } else {
              showToast('您的权限不足');
              return
            }
          } else {
            state.stafalg = true;
            state.result = res.data.data.result
          }
        })

    }


  })
}
const txinq = () => {
  console.log(state)
  if (state.flag) {
    zdqyeng()
    if (state.stafalg == false) {
      return
    }
    var strs1 = ''
    var url = window.location.href; //获取url中"?"符后的字串
    var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
    strs1 = str.split("=");
    let key = strs1[1].substring(0, strs1[1].length - 2)
    if (state.result && state.roleLevel != 'L1') {
      if (state.stafalg) {
        router.push({
          path: '/iframe',
          query: {
            url: 'https://qqzq.baoan.gov.cn/biqvxapph5/?appealList=1&accessKey=' + key,
            telite: '提诉求',
          }
        })
      }

    }
  } else {
    showToast('请登录!');
  }

}
const getrlzhi = () => {

  wx.miniProgram.postMessage({
    data: {
      type: 'mini',
      appid: 'wx2d27e5690a83eb7e',
      shortLink: '#小程序://深圳人力资源/wJyYgCnPjQ2CKLD',
      modalTip: '是否跳转该“人力资源”小程序',
    },
  })
  wx.miniProgram.navigateBack()
}

const showToastitem = () => {
  showToast('敬请期待');
}
const Finds = () => {
  $api.Findspace().then(res => {
    if (res.message != '') {
      state.Findsitem = res.message.sort(function (a, b) {
        return a.ID - b.ID;
      });
    }
  })
}
// 跳转详情
const gotoCi = (item, name) => {
  wx.miniProgram.navigateTo({
    url: '/packages/zoneIndex/zxDetail/index?cuid=' + item
  })

}
const gotoCiitem = (item) => {
  wx.miniProgram.navigateTo({
    url: '/packages/activity/detail/index?cuid=' + item
  })
}
const gotoCi1 = (item) => {
  router.push({
    path: item,

  })
}
const finditem = () => {
  router.push({
    path: `/find`,

  })
}

const yuanqitem = () => {
  router.push({
    path: `/trends`,

  })
}
const lawitem = (item) => {
  wx.miniProgram.navigateTo({
    url: '/packages/zoneIndex/zyfw/shop-detail/index?cuid=' + item
  })
}

const informationitem = () => {
  router.push({
    path: `/activity`,

  })
}
//跳转深i优才
const getwindow = (item) => {
  window.location.href = item
}
// 跳转h5地址
const pathlist = (item, list) => {
  console.log(item);
  if (state.flag) {
    let strs12 = ''
    var url1 = window.location.href; //获取url中"?"符后的字串
    if (url1.indexOf("?") != -1) {
      //判断是否有参数
      var str1 = url1.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
      strs12 = str1.split("=");
    }
    let key = strs12[1].substring(0, strs12[1].length - 2)
    let strs1 = ''
    var url = item; //获取url中"?"符后的字串
    if (url.indexOf("?") != -1) {
      //判断是否有参数
      var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
      strs1 = str.split("=");
    }
    let paramsStr = url.split('?')[1]
    let params = {}
    if (!paramsStr) {
      return params
    }
    // 将参数字符串以&分割成数组  
    let paramsArr = paramsStr.split('&');
    // 循环处理，又以=分割， item.split('=')[0]作为key, item.split('=')[1]作为value
    paramsArr.forEach(item => {
      if (item.split('=')[0] && item.split('=')[1]) params[item.split('=')[0]] = item.split('=')[1]
      if (item.includes('accessKey=dev:test')) {
        item = 'accessKey=' + key
      }
    })
    item = item.replace('dev:test', key)
    router.push({
      path: '/iframe',
      query: {
        url: item,
        telite: list
      }
    })
  } else {
    router.push({
      path: '/iframe',
      query: {
        url: item,
        telite: list
      }
    })
  }


}
// 跳转海外
const listqyin = () => {
  router.push({
    path: '/tab'
  })
}
const goPark = (item, i) => {
  router.push({
    path: '/park/detail',
    query: {
      item: item,
      title: i
    }
  })
}

const goFirm = (i, item) => {
  router.push({
    path: '/firm/detail',
    query: {
      title: item,
      ID: i
    }
  })
}
const Corporat = () => {
  $api.CorporateStyle().then(res => {
    if (res.message != '') {
      state.dataCorporat = res.message
    }

  })
}
const getSignature = (msg, key, timestamp, nonce) => {
  const sha256Hex1 = sha256Hex(msg);
  const hmacInput = key + timestamp + nonce + sha256Hex1;
  const hmac2561 = hmac256(hmacInput, nonce); // 注意：这里的 nonce 应该不是 HMAC 密钥的一部分  
  return hmac2561;
};
const sha256Hex = (msg) => {
  let lsit = crypto.SHA256(msg).toString(crypto.enc.Hex).toLowerCase()
  return lsit;
};

const hmac256 = (key, msg) => {
  const secretKey = crypto.enc.Utf8.parse(key);
  const msg1 = crypto.enc.Utf8.parse(msg);
  const hash = crypto.HmacSHA256(msg1, secretKey);
  return hash.toString(crypto.enc.Hex).toLowerCase();
};
const getRandomNumber = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 示例用法
const msg = "请求报文信息";
const key = "w2cs1PPZazaPCvXw";
const timestamp = Math.floor(Date.now() / 1000);
const nonce = getRandomNumber(1000, 9999);
const start = 0; /* 页数，0开始 */
const limit = 20; /* 每页显示数量，默认20 */

const postData = {
  relObjType: "STREET",
  relObjID: '440306009000',
  start: start,
  limit: limit,
};
const postData12 = {
  relObjType: "DISTRICT",
  relObjID: '',
  start: start,
  limit: limit,
};
import { Base64 } from 'js-base64';
const signature = getSignature(JSON.stringify(postData), key, timestamp, nonce);
const signature12 = getSignature(JSON.stringify(postData12), key, timestamp, nonce);
const postData1 = {
  relObjType: "PARK",
  relObjID: '440306025000',
  start: start,
  limit: limit,
};
const signature1 = getSignature(JSON.stringify(postData1), key, timestamp, nonce);


const activityitem = () => {
  state.find = []
  state.information = []
  let url = "https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/park/applet/page4cms";
  axios.post(url, postData, {
    headers: {
      "Timestamp": timestamp,
      "Signature": signature,
      "Nonce": nonce,
      "App-Id": "yljd",
    },
  })
    .then((res) => {
      if (res.data.data != '') {
        res.data.data.forEach(item => {
          item.img = 'https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/attachment/download/' + Base64.encode(item.previewImg1) + '?serviceName=MinioAttachService'
          state.information.push(item)
          list.value.push({
            title: item.title,
            ID: item.cuid,
          })
        })
        state.information = res.data.data


      }
    });

  let url1 = "https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/park/applet/page4activity";
  axios.post(url1, postData12, {
    headers: {
      "Timestamp": timestamp,
      "Signature": signature12,
      "Nonce": nonce,
      "App-Id": "yljd",
    },
  })
    .then((res) => {
      if (res.data.data != '') {
        res.data.data.forEach(item => {
          item.img = 'https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/attachment/download/' + Base64.encode(item.previewImg1) + '?serviceName=MinioAttachService'
          state.information.push(item)
        })
        state.find = res.data.data

      }
    });


}
const daillist = () => {
  let url = "https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/park/applet/page4shop";
  axios.post(url, postData1, {
    headers: {
      "Timestamp": timestamp,
      "Signature": signature1,
      "Nonce": nonce,
      "App-Id": "yljd",
    },
  })
    .then((res) => {
      if (res.data.data != '') {

        res.data.data.forEach(item => {
          item.img = 'https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/attachment/download/' + Base64.encode(item.logoImg) + '?serviceName=MinioAttachService'
          state.flistfw.push(item)
          let arr = []
          if (item.srvType[4].length) {
            item.srvType[4].forEach(i => {
              state.listits.push(i.srvType)
              arr.push(i.srvType)
            })
            item.srvTypeL1 = arr.toString()
          }
          //  item.srvTypeL2 =item.srvTypeL2.split(",")
          console.log(state.listits, 'state.listits');
        })
        state.listits = [...new Set(state.listits)]

      }
    });

}
const Featured = () => {

  $api.FeaturedPark().then(res => {
    if (res.message.length > 0) {
      state.Park = res.message
    }
  })
}
const Carousel = () => {
  $api.Carouselchart().then(res => {
    if (res.message != '') {
      state.imgurl = res.message
    }
  })
}
const listitmd = () => {
  var url = window.location.href; //获取url中"?"符后的字串
  if (url.indexOf("?") != -1) {
    //判断是否有参数
    var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
    let strs = str.split("=");
    if (strs[1] != '#/') {
      state.flag = true
    }
    //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）   //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
    // 引入crypto-js库  
    const CryptoJS = require("crypto-js");
    var appSecret = CryptoJS.enc.Utf8.parse("w2cs1PPZazaPCvXw"); // 将密钥转换为WordArray  
    var accessKey = strs[1].substring(0, strs[1].length - 2); // 要加密的数据  

    // 使用AES加密（ECB模式，PKCS7填充）  
    var encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(accessKey), appSecret, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    });

    // 将CipherParams对象转换为十六进制字符串  
    var encryptedHex = encrypted.ciphertext.toString(CryptoJS.enc.Hex);
    // 将加密后的数据转换为十六进制字符串 
    state.AccessKey = encryptedHex
  }
}


onMounted(() => {
  daillist()
  authlist()
  activityitem()
  listitmd()
  Finds()
  Featured()
  Carousel()
  Corporat()
  setInterval(() => {
    if (state.flag) {
      authlist()
    }
  }, 3000)
})


watch(() => route, () => {
  if (route.name === 'Login') {
    activityitem()
    listitmd()
    // authlist()
  } else {
    clearInterval(state.timer)
  }
}, {
  deep: true,
  immediate: true
})
</script>

<style lang='scss' scoped>
.draggable-circle {
  position: absolute;
  cursor: grab;
  width: 50px;
  /* 容器大小，根据需要调整 */
  height: 50px;
  border-radius: 50%;
  background-color: #000;
  z-index: 999;
  cursor: grabbing;
  top: 750px;
  right: 30px;
}

.input-item {
  border-radius: 10px;
  padding: 0.5rem;
  margin: 1rem;
  color: #30394a;
  display: flex;
  align-content: center;
  z-index: 12;
  position: absolute;
  left: .5rem;
  top: -0.5rem;
  width: 90%;
  background-color: #fff;

  .input-icon {
    width: 1.5rem !important;
    margin-right: 5px;
  }
}

.commit {
  overflow: hidden;
  height: 100%;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  background-color: #FBF9F8;
  box-sizing: border-box;
  position: relative;

  .swipe {
    position: relative;

    img {
      width: 100%;
    }

    .lib-img {
      z-index: 12;
      position: absolute;
      left: 2rem;
      bottom: 4rem;

      .listbb {
        font-size: 1.3rem;
        color: #fff;
      }

      .listqm {
        font-size: .8rem;
        color: #fff;
      }
    }

    .enterprise {
      width: 90%;
      position: absolute;
      left: 5%;
      bottom: -1rem;

      .enterprise-item {
        position: relative;
        border-radius: 2rem;
        box-shadow: .1rem .1rem .1rem .1rem rgba(0, 0, 0, .1);

        span,
        .assetslist {
          position: absolute;
          z-index: 4;

        }

        .assetslist {
          width: 1.5rem;
          height: 1.5rem;
          top: .6rem;
          left: 13px;
        }

        span {
          width: 3.5rem;
          top: 9px;
          right: 7px;
          text-align: center;
          height: 1.5rem;
          line-height: 1.5rem;
          color: #4990EB;
          border: 1px solid #4990EB;
          border-radius: 2rem;
          font-size: .78rem;
        }

        .list {

          padding-left: 3rem;
          border-radius: 2rem;

          :deep().van-field__control {
            color: #4990EB;
          }

          :deep().van-field__control:disabled {
            color: #4990EB;
            -webkit-text-fill-color: #4990EB;
          }
        }

        .listdd {
          padding-left: 1rem;
        }

        display: flex;

        .list {
          width: 100%;
        }
      }
    }
  }

  .laib {

    margin-top: 1.8rem;
    display: flex;
    justify-content: center;

    .laib-item {
      display: flex;
      align-items: center;

      // img{
      //   width: 4rem;
      //   height: 1.7rem;
      //   margin-right: 0.4rem;
      // }
      .left-idst {
        overflow: hidden;
        width: 14rem;

        .item {
          margin: 0 1rem;
        }
      }

      .listdd {
        margin: 0;
        line-height: 44px;
        font-size: .95rem;
        color: #787979;
      }

      .laba001hover {
        width: 1.15rem;
        height: 1.15rem;
        margin-left: .6rem;
      }

      .ion13 {
        width: 4.0375rem;
        height: .9rem;
        margin-left: .3rem;
        margin-right: .6rem;
      }

      width: 90%;
      height: 2.8rem;
      border-radius: 4px;
      background-color: #E0ECFF;

    }

  }

  .list-kj {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;

    ul {
      width: 90%;
      display: flex;
      justify-content: space-between;
      padding: 0 1rem;
      box-sizing: border-box;

      li {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        flex-direction: column;

        img {
          width: 2.475rem;
          height: 2.475rem;
        }

        .list {
          height: 2.275rem;
          margin-bottom: .2rem;
        }

        span {
          margin-top: .1rem;
          font-size: .9rem;
          color: #4d4c4c;
        }
      }
    }
  }

  .title {
    position: relative;
    margin-top: 0.6rem;
    padding-left: 5%;
    font-size: 1.2rem;
    color: #3B3B3B;

    p {
      margin-left: 1.4rem;
      font-size: .9rem;
      color: #A7A8AA;
      display: inline-block;
    }

    span {
      font-size: .9rem;
      position: absolute;
      right: 1rem;
      color: #3785E9;
      line-height: 1.8rem;
    }

    .ligd {
      line-height: 2.9675rem;
    }
  }

  .title-list {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;

    ul {
      width: 90%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      li {
        position: relative;
        padding: 0.3rem 0.7rem;
        width: 47%;
        height: 10rem;
        border-radius: 1rem;
        position: relative;

        &:nth-child(1) {
          margin-bottom: 1rem;
        }

        .ion3 {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
        }

        div {
          position: relative;
          padding-left: .5rem;
          z-index: 2;
          display: flex;
          align-items: center;
          font-size: .9rem;

          img {
            width: .9rem;
            height: .9rem;
            margin-right: .2rem;
          }

          span {
            font-size: .8rem;
          }
        }

        .list {
          padding-left: 0rem;
          position: absolute;
          right: 0.2rem;
          bottom: 0.8rem;
          font-size: 4.5rem;
          width: 5rem;
          height: 4rem;
          color: #B9D3FA;
          font-weight: bold;
          display: flex;
          align-items: flex-end;
          justify-content: right;

          img {
            width: 100%;
            height: 100%;
          }

          .Fill1 {
            width: 4rem;
            height: 3.5rem;
          }

          .qi {
            width: 3.5rem;
            height: 2.8rem;
          }

          .enlizhaopin {
            width: 4.5rem;
            height: 3.5rem;
          }

          .xiaomaochuhai {
            width: 3.8rem;
            height: 3.7rem;
          }
        }

        .van-icon {
          font-size: 1rem;
          margin-right: .2rem;
        }

        .ai {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 4rem;
          height: 4rem;
        }

        box-sizing: border-box;

        div {
          line-height: 1.6rem;
          min-height: 1.6rem;
        }

        .title-item {
          padding-left: 0;
          font-size: 1.1rem;
          margin-bottom: 0.7rem;
          margin-top: 0.4rem;
          color: #4d4c4c;

          .van-icon {
            font-size: 1.1rem;

          }

        }
      }

      .colork {
        color: #83B0EA;
      }

      .colorr {
        color: #F7BD71;
      }

      .colord {
        color: #E79692;
      }
    }
  }

  .yuanq {
    margin-top: 0.6rem;
    margin-bottom: 1.3rem;

    .listpd {
      height: 6rem;
      line-height: 8rem;
      font-size: 1rem;
    }

    :deep() {
      .van-tabs {

        .van-tabs__nav--line {
          // padding-bottom: 10px;
        }

        .van-tab__text {
          color: #545556;
          font-size: .85rem;
        }

        .van-tab--active {
          .van-tab__text {
            color: #3B3B3B;
          }
        }

        .van-tabs__nav--line {
          background-color: #FBF9F8;
        }

        .van-tabs__wrap {

          height: 40px;
          border-bottom: 1px solid #9c9c9c;
        }
      }
    }

    .van-tab__panel {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;

      .yaung-item {
        width: 90%;
        padding: 0.8rem 0 0.8rem;
        box-sizing: border-box;
        display: flex;
        border-bottom: 1px solid #C8C9CC;

        .item-left {
          margin-right: 0.6rem;

          img {
            width: 6.2rem;
            height: 6.2rem;
          }
        }

        .item-right {
          .item-wzi {
            margin-top: 0.2rem;
            font-weight: 400;
            font-size: 1rem;
            color: #3B3B3B;
          }

          .xinxin {
            margin: .8rem 0;
            position: relative;
            display: flex;
            align-items: center;

            img {
              width: 1rem;
              height: 1rem;
              margin-right: 0.2rem;
            }

            span {
              position: absolute;
              right: 0.6rem;
              line-height: 1.2rem;
              color: orangered;
            }
          }

          .pl {
            span {
              display: inline-block;
              font-size: 0.71rem;
              padding: 0.1rem;
              margin-right: 0.6rem;
              margin-bottom: 0.6rem;
              background-color: #D3DFEF;
              color: #3D87E7;

              &:last-child {
                margin-right: 0rem;
              }
            }
          }
        }
      }
    }

  }

  .mygd {
    height: 4rem;
    line-height: 4rem;
    color: #969799;
    font-size: .9rem;
  }

  .swipe1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;

    .my-swipe {
      width: 90%;

      .van-swipe__track {
        border-radius: .7rem !important;
        overflow: hidden;
      }

      .van-swipe-item {
        border-radius: .7rem;
        overflow: hidden;
      }

      img {
        width: 100%;
        border-radius: .7rem;
        height: 13rem;

      }

      .swipe-pos {
        position: relative;

        .list {
          position: absolute;
          top: 1rem;
          left: 1rem;
          font-size: 1.2rem;
          color: #fff;
          text-shadow: -1px 0px 1px #0f9ad1, 1px 0px 1px #0f9ad1, 0px -1px 1px #0f9ad1, 0px 1px 1px #0f9ad1;
        }
      }
    }

  }

  .qyfc {
    width: 100%;
    margin-top: 0.8rem;
    display: flex;
    justify-content: center;
    // .swipe{
    //   width: 90%;
    //   .item{
    //     display: flex;
    //     flex-direction: column;
    //     margin-right: 2rem;
    //     span{
    //       line-height: 2rem;
    //       font-size: 1rem;
    //       font-weight: bold;
    //     }
    //   }

    // }
    .qyfcimgli {
      width: 90%;
      margin-bottom: 1rem;

      .van-swipe-item {
        width: 15rem !important;
        margin-right: 2rem;

        img {
          width: 15rem;
          height: 10rem;
          border-radius: .5rem;
          margin-bottom: .5rem;
        }

        span {
          font-size: 1.05rem;
          font-weight: 400;
          color: #151516;
        }
      }
    }

    ul {
      width: 90%;
      display: flex;
      justify-content: space-between;

      li {
        display: flex;
        flex-direction: column;

        .qyfcimg {
          width: 13rem;
          height: 8.75rem;
        }

        .sxing {
          width: 6.5rem;
          height: 8.75rem;
        }

        span {
          margin-top: .4rem;
          font-size: 1.1rem;
          font-weight: 600;
        }
      }
    }
  }

  .zhonx {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;

    .zhong {
      width: 90%;

      img {
        width: 100%;
        border-radius: 1rem;
      }
    }
  }

  .activity {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .activity-item {
      margin-bottom: 0.8rem;
      width: 90%;
      display: flex;

      .item-left {
        margin-right: 0.8rem;
        position: relative;

        img {
          width: 6.25rem;
          height: 6.25rem;
        }

        span {
          position: absolute;
          left: 0;
          top: 0;
          font-size: .8rem;
          color: #fff;
          background-color: #dbbc0a;
        }
      }

      .item-right {
        overflow: hidden;

        p {
          font-size: 1.1rem;
          font-weight: 400;
          margin: 0;
          width: 99%;
          white-space: nowrap;
          overflow: hidden;
          color: #3B3B3B;
          text-overflow: ellipsis;
          margin-bottom: 0.2rem;
        }

        .tiele {
          font-size: .8rem;
          line-height: 1.4rem;
          color: #787979;
          width: 99%;
          white-space: nowrap;
          overflow: hidden;
          color: #3B3B3B;
          text-overflow: ellipsis;
          margin-bottom: 0.2rem;
        }

        .item {
          margin-top: 0.2rem;
          display: flex;
          justify-content: space-between;
          // padding-right: 0.8rem;
          box-sizing: border-box;

          .item-leftt {
            display: flex;

            span {
              padding: 0.1rem;
              font-size: 0.8rem;
              background-color: #D3DFEF;
              color: #3885E9;
            }
          }

          .item-rightt {
            display: flex;
            align-items: center;

            span {
              line-height: 1.4rem;
            }

            font-size: .8rem;
            color: #7D7E7E;

            img {
              position: relative;
              top: -0.1rem;
              width: 1.1rem;
              height: .8rem;
              margin-left: .5rem;
              margin-right: .2rem;
            }

            .fenxiang {
              width: .8rem;
              height: .9rem;
              top: -0.1rem;
            }

            .xingxing {
              top: -0.1rem;
              width: 1rem;
              height: .9rem;
            }
          }
        }
      }
    }
  }

  .disnon {
    display: none !important;
  }

  .activity-one {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .activity-item {
      margin-bottom: 0.8rem;
      width: 90%;
      display: flex;
      border-bottom: 1px solid #ccc;
      padding-bottom: 1rem;

      .item-left {
        margin-right: 0.8rem;

        img {
          width: 6.25rem;
          height: 6.25rem;
        }

      }

      .item-right {
        width: 75%;
        overflow: hidden;

        p {
          font-size: 1.1rem;
          font-weight: 400;
          margin: 0;
          width: 99%;
          white-space: nowrap;
          overflow: hidden;
          color: #3B3B3B;
          text-overflow: ellipsis;
          margin-bottom: 0.2rem;
        }

        .tiele {
          margin-top: 0.2rem;
          font-size: .9rem;
          line-height: 1.5rem;
          display: flex;

          span {
            color: #888;
          }

          color: #323333;
        }

        .item {
          margin-top: .4rem;

          .item-rightt {
            display: flex;
            align-items: center;

            span {
              line-height: 1.4rem;
              margin-right: 1rem;
            }

            font-size: .8rem;
            color: #7D7E7E;

            img {
              position: relative;
              top: -0.1rem;
              width: 1.1rem;
              height: .8rem;
              margin-right: .2rem;
            }

            .fenxiang {
              width: .8rem;
              height: .9rem;
              top: -0.1rem;
            }

            .xingxing {
              top: -0.1rem;
              width: 1rem;
              height: .9rem;
            }
          }
        }
      }
    }
  }
}
</style>